import { Canvas, Controls, Meta, Source } from '@storybook/blocks'

import { RadixPrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button'
import * as ToggleGroupStories from './toggle-group.stories'

<Meta of={ToggleGroupStories} />

<RadixPrimitiveDocsButton name='toggle-group' />

# Toggle Group

A set of two-state buttons that can be toggled on or off.

## Preview

<Canvas of={ToggleGroupStories.Default} />

<Controls />

## Usage

export const importCode = `import { ToggleGroup, ToggleGroupItem } from "@orbitkit/ui/toggle-group"`

export const usageCode = `<ToggleGroup type="single">
  <ToggleGroupItem value="a">A</ToggleGroupItem>
  <ToggleGroupItem value="b">B</ToggleGroupItem>
  <ToggleGroupItem value="c">C</ToggleGroupItem>
</ToggleGroup>
`

<Source code={importCode} language='ts' dark />
<Source code={usageCode} language='tsx' dark />

## Examples

### Default

<Canvas of={ToggleGroupStories.Default} />

### Outline

<Canvas of={ToggleGroupStories.Outline} />

### Single

<Canvas of={ToggleGroupStories.Single} />

### Small

<Canvas of={ToggleGroupStories.Small} />

### Large

<Canvas of={ToggleGroupStories.Large} />

### Disabled

<Canvas of={ToggleGroupStories.Disabled} />
